import TableHeader from "../../../../components/Xie/tableHeader";
import {
    Button, Divider, Space, Table, Tag, Avatar, Modal, Image, DatePicker
} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useState, useEffect } from 'react';
import AllData from '../../../../api/AllXie'
import { useNavigate } from "react-router-dom";
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
import index from './index.scss'
const Video = () => {
    let totals = 0
    useEffect(() => {
        selectAllVideo()
    }, [])
    const { RangePicker } = DatePicker;
    const [datas, setDatas] = useState([]);
    // 表格内容
    // 列
    // const URL = "http://192.168.221.229:8001"
    const columns = [
        {
            title: '课程信息',
            dataIndex: 'course',
            render: (_, record) => {
                return <div>
                    <Image
                        width={40}
                        height={30}
                        src={record.src}
                    />
                    <span className='coursetit'>{record.videoName}</span>
                </div>

            }
        },
        {
            title: '课程价格(元)',
            dataIndex: 'price',

        },
        {
            title: '订阅量',
            dataIndex: 'subscription',

        },
        {
            title: '课程状态',
            dataIndex: 'onState',

            render: (_, record) => {
                if (record.onState == 1) {
                    return <Tag color="green">已上架</Tag>
                }
                if (record.onState == 2) {
                    return <Tag color="red">已下架</Tag>
                }
                if (record.onState == 0) {
                    return <Tag color="orange">待上架</Tag>
                }
            }
        },
        {
            title: '课程类型',
            dataIndex: 'classType',
            render: (_, record) => {
                if (record.classType == 1) {
                    return <span>单节课</span>
                }
                if (record.classType == 2) {
                    return <span>系列课程</span>
                }
            }

        },
        {
            title: '上架时间',
            dataIndex: 'onTime',

        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (_, record) => (
                <Space size='middle'>
                    <a onClick={() => { editMsg(record) }}>编辑</a>
                    <a onClick={() => { showConfirm(record.id) }}>下架</a>
                    <a onClick={() => { delConfirm(record.id) }}>删除</a>
                </Space>
            )
        },
    ];
    //   表格数据
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };
    // 编辑下架删除相关操作
    //编辑
    const videoEdit = useNavigate()
    const editMsg = (value) => {
        console.log(value);
        videoEdit('/home/course/videoedit', { state: value })
    }
    // 新建
    const jumpAdd = useNavigate()
    const jumpAddVideo = (value) => {
        jumpAdd('/home/course/videoadd', { state: value })
    }
    // 点击下架的时候所弹出的弹框
    const { confirm } = Modal;
    const showConfirm = (value) => {
        confirm({
            title: '下架课程',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要下架该课程么?',
            cancelText: '取消',
            okText: '确定',
            centered: true,
            onOk() {
                console.log('OK', value);
                AllData.xiajia(value).then((res) => {

                    selectAllVideo()
                })
            },
        });
    };
    // 删除的时候所弹出的模态框

    const delConfirm = (value) => {
        confirm({
            title: '删除课程',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要删除该课程么?',
            cancelText: '取消',
            okText: '确定',
            centered: true,
            onOk() {
                // console.log('OK', value);
                delIdVideo(value)

            },
        });
    };
    // 根据条件查询
    const fn = (value) => {
        console.log(value, 12333333);
        if (value == null) {
            totals = 0
        } else {
            totals = value.length
        }
        setDatas(value)
    }
    // 页码
    const showTotal = (total) => `数量 ${total} 条`;
    //复选框
    const [selectionType, setSelectionType] = useState('checkbox');
    // 查询所有视频
    function selectAllVideo() {
        AllData.selectVideo().then((res) => {
            console.log(res.data);
            // totals = res.data.length
            // res.data[0].onTime = moment(res.data[0].onTime).format('YYYY/MM/DD HH:mm:ss');
            // console.log(res.data[0].onTime);
            setDatas(res.data)
        })
    }
    // 根据Id删除视频
    function delIdVideo(video) {
        console.log(video);
        AllData.delVideo(video).then((res) => {
            console.log(res);
            selectAllVideo()
        })
    }
    return <div style={index} className="videoTable" >
        <TableHeader titjump={'视频课程'} tit={'视频课程'} getfn={fn}></TableHeader>
        <div className="footer">
            <div className="tableTop clear">
                <span>课程列表</span>
                <div className='tableBtn'>
                    <Button type='primary' className='btn1' onClick={() => { jumpAddVideo(1) }}>新建</Button>
                    <Button>批量操作</Button>
                </div>
            </div>
            <div className='tablemid'>
                <Divider />
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    pagination={{
                        total: totals,
                        showTotal: showTotal,
                        showSizeChanger: true,
                        showQuickJumper: true,
                    }}
                    columns={columns}
                    dataSource={datas}
                    rowKey={(record) => record.id}
                />
            </div>

        </div>

    </div>
}

export default Video;